<!DOCTYPE html>
<html lang="en">
<head>

    <!--查看管理已审核通过和已上架的新闻-->
    <!--查看管理已审核通过和已上架的新闻-->
    <!--查看管理已审核通过和已上架的新闻-->

    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


    <style type="text/css">
        .demo-input-suffix{ margin-left: 20px;
            margin-top: 10px;
        }
        .col-md-8{
            margin-left: 250px;
            border-radius: 10px;
        }
        .a1{
            margin-bottom: 50px ;
            width: 100px;
            height: 39px;
        }
        body{background-image: url("https://img1.baidu.com/it/u=1https://img0.baidu.com/it/u=1077257707,855832289&fm=26&fmt=auto");}
    </style>
</head>
<body>
<div id="app">

    <!--根据新闻标题搜索-->
    <el-form :inline="true" :model="Info"  class="demo-form-inline">
        <el-form-item label="新闻标题" >
            <el-input v-model="Info.title" placeholder="请输入新闻标题"></el-input>
        </el-form-item>
        <el-button class="a1" type="primary" plain icon="el-icon-search"  @click="searchTit()">搜索</el-button>

    </el-form>

    <template>
        <el-table
                :data="newsArr"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="标题"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="日期">
            </el-table-column>
            <el-table-column
                    prop="newsType.tname"
                    label="新闻类型">
            </el-table-column>
            <el-table-column
                    prop="newsReporter.rname"
                    label="发布者">
            </el-table-column>
            <el-table-column
                    prop=""
                    fixed="right"
                    label="查看新闻" >
                <template slot-scope="scope">
                    <el-button type="warning" size="small" @click="see(scope.row.id)">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop=""
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="danger" size="small" @click="deletenews(scope.row.id)" >删除</el-button>
                </template>

            </el-table-column>

        </el-table>
    </template>
    <el-pagination
            style="margin:  0  auto"
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :total="totalCount">
    </el-pagination>

    <!--弹窗查看新闻内容-->
    <el-dialog
            title="新闻内容"
            :visible.sync="dialogVisible"
            width="50%"
            :model="cInfo"
            :before-close="handleClose">
        <p v-html="cInfo.content"></p>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
  </span>
    </el-dialog>


</div>
<script>


    var haha = new Vue({
        el:"#app",
        data:{
            Info:{},
            cInfo:{},
            handleClose:{},
            newsArr:[],
            totalCount:0,
            dialogVisible:false
        },

        methods:{

            // 查看新闻弹框
            see(id){
                $.get("/ssm/news/get/" +id,function (backDate) {
                    haha.cInfo = backDate.data;
                    haha.dialogVisible = true;
                })
            },

            // 删除已上架的新闻
            deletenews(id){
                haha.$confirm('此操作将永久删除该新闻, 是否继续?', '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.get("/ssm/news/deletenews/" + id, function (backData) {
                        if (backData.code == 2) {
                            haha.$message({
                                message: '恭喜你，删除成功',
                                type: 'success',
                            });
                            getData(1, 10)
                        }else {
                            haha.$message({
                                message: '删除失败',
                                type: 'warning',
                            });
                        }
                    });
                });
            },

            // 搜索后刷新当前界面
            searchTit(){
                getData(1,10);
            },

            handleCurrentChange(val){
                getData(val,10);
            }
        }

    });


    function getData(a,b){
        haha.Info.pageNo= a;
        haha.Info.pageCount=b;
        // 获取全部数据
        $.post("/ssm/news/query",haha.Info,function(backData){
            haha.newsArr = backData.data.currentData;
            haha.totalCount = backData.data.totalCount;
        })
    }
    getData(1,10);
</script>
</body>
</html>